<template>
  <div class="person-info">
    <div class="card-title">
      <h3>项目成员信息</h3>
      <el-button type="primary" @click="addPeople">添加成员</el-button>
    </div>
    <div class="card-table">
      <el-table :data="personList" border style="width: 100%">
        <el-table-column align="center" prop="personName" label="姓名 ※">
          <template slot="header">
            <span class="custom-table-header">姓名 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.personName" placeholder="姓名" />
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="personSex"
          label="性别"
          width="100"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.personSex" placeholder="性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="personBirthday"
          label="出生日期"
          width="160"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.personBirthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="出生日期"
              style="width: 100%"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="personDepartment"
          label="单位/部门"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.personDepartment"
              placeholder="单位/部门"
            />
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="personLearnLevel" label="学历 ※">
          <template slot="header">
            <span class="custom-table-header">学历 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.personLearnLevel" placeholder="学历" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="personSpecial" label="专业 ※">
          <template slot="header">
            <span class="custom-table-header">专业 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.personSpecial" placeholder="专业" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="personJobTitle" label="职称 ※">
          <template slot="header">
            <span class="custom-table-header">职称 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.personJobTitle" placeholder="职称" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="personDuty" label="担任角色 ※">
          <template slot="header">
            <span class="custom-table-header">担任角色 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.personDuty"
              clearable
              placeholder="担任角色"
            >
              <el-option
                v-for="item in personDutyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="personRank" label="成员排名 ※">
          <template slot="header">
            <span class="custom-table-header">成员排名 <span>※</span></span>
          </template>
          <template slot-scope="scope">
            <el-input
              oninput="value=value.replace(/[^\d]/g,'')"
              v-model.number="scope.row.personRank"
              placeholder="成员排名(数字)"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="personRemark"
          label="备注"
          width="200"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.personRemark" placeholder="备注" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="80"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="delPerson(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { personDutyOptions } from '@/utils/commonData'
export default {
  data() {
    return {
      personDutyOptions,
      personList: []
    }
  },
  methods: {
    addPeople() {
      const item = {
        personName: '',
        personSex: '',
        personBirthday: '',
        personDepartment: '',
        personLearnLevel: '',
        personSpecial: '',
        personJobTitle: '',
        personDuty: '',
        personRank: undefined,
        personRemark: '',
        index: this.personList.length
      }
      this.personList.push(item)
    },
    delPerson(row) {
      const itemIndex = this.personList.findIndex((x) => x.index === row.index)
      this.personList.splice(itemIndex, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.person-info {
  .card-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    h3 {
      margin-right: 20px;
    }
  }
}
</style>